Các Kiểu Nâng Cao trong TypeScript: Nắm Vững Kiểu Ký Tự Mẫu và Kiểu Điều Kiện

Ví dụ Quốc tế: Xử lý các Định dạng Ngày khác nhau

Các khu vực khác nhau trên thế giới sử dụng các định dạng ngày khác nhau. Bạn có thể sử dụng kiểu điều kiện để xử lý các biến thể này.

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate(dateString: string, format: T): ParseDate {
  // (Implementation would handle different date formats)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("Invalid date format");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // Type: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Type: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Type: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Access the year knowing it will be there

Ví dụ này sử dụng các kiểu điều kiện để định nghĩa các hàm phân tích cú pháp ngày khác nhau dựa trên định dạng ngày được chỉ định. Kiểu ParseDate đảm bảo rằng đối tượng trả về có các thuộc tính chính xác dựa trên định dạng.

Kết hợp Kiểu Ký Tự Mẫu và Kiểu Điều kiện

Sức mạnh thực sự xuất hiện khi bạn kết hợp kiểu ký tự mẫu và kiểu điều kiện. Điều này cho phép thao tác kiểu cực kỳ mạnh mẽ.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName
  ? { type: T; payload: any }  // Simplified for demonstration
  : never;


type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"


//Example function that takes a type
function processEvent(event: T): ExtractEventPayload {
    //In a real implementation, we would actually dispatch the event.
    console.log(`Processing event ${event}`);

    //In a real implementation, the payload would be based on event type.
    return { type: event, payload: {} } as ExtractEventPayload;
}

//Note that the return types are very specific:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

//If you use other strings, you get never:
// const someOtherEvent = processEvent("someOtherEvent"); // Type is `never`

Thực tiễn Tốt nhất và Cân nhắc

• Giữ đơn giản: Mặc dù mạnh mẽ, các kiểu nâng cao này có thể trở nên phức tạp nhanh chóng. Hãy cố gắng đạt được sự rõ ràng và khả năng bảo trì.
• Kiểm tra kỹ lưỡng: Đảm bảo rằng các định nghĩa kiểu của bạn hoạt động như mong đợi bằng cách viết các bài kiểm tra đơn vị toàn diện.
• Tài liệu hóa Mã của bạn: Tài liệu hóa rõ ràng mục đích và hành vi của các kiểu nâng cao của bạn để cải thiện khả năng đọc mã.
• Cân nhắc Hiệu suất: Việc sử dụng quá mức các kiểu nâng cao có thể ảnh hưởng đến thời gian biên dịch. Hồ sơ mã của bạn và tối ưu hóa khi cần thiết.